<script setup>
import { useCandidateStore } from '@/stores'
import { candidateUplaodResumeService } from '@/api/candidate'
import { DocumentAdd, DocumentChecked } from '@element-plus/icons-vue'
import { ref } from 'vue'

const test = ref()
let _object
let name
const isSelected = ref(false)
const loading = ref(false)

/*选择文件*/
const candidateStore = useCandidateStore()
const fileChange = async (e) => {
  const file = e.target.files[0]
  // if (file && file.type === 'application/pdf') {
  // } else {
  //   // 如果不是PDF文件，给出错误提示
  //   ElMessage.error('请选择PDF文件')
  //   // 清空选择的文件
  //   e.target.value = ''
  // }
  _object = file
  name = file.name
  isSelected.value = true
}
/*提交文件*/
const submint = async () => {
  loading.value = true
  const _formData = new FormData()
  _formData.append('file', _object)
  _formData.append('username', candidateStore.candidate.username)
  await candidateUplaodResumeService(_formData)
  isSelected.value = false
  loading.value = false
  _object = null
  _formData.value = null
  ElMessage.success('文件上传成功')
}
</script>

<template>
  <layout-com title="简历上传">
    <!-- 主体部分 -->
    <input
      type="file"
      name="file"
      style="display: none"
      @change="fileChange"
      ref="test"
    />
    <el-row>
      <el-col :span="8" :offset="8" class="upload_container">
        <div
          class="upload-box"
          v-loading="loading"
          element-loading-background="rgba(141,164,195, 0.4)"
          @click="$refs.test.click()"
        >
          <DocumentAdd
            class="icon"
            style="width: 8em; height: 8em"
            color="grey"
            v-if="isSelected === false"
          />
          <DocumentChecked
            class="icon"
            style="width: 8em; height: 8em"
            color="grey"
            v-else
          />
          <div class="text" v-if="isSelected === false">点击此处添加简历</div>
          <div class="text" v-else>已选中文件: {{ name }}</div>
        </div>
        <div class="btu-box">
          <el-button type="info" color="#909399" :dark="isDark" @click="submint"
            >提交解析</el-button
          >
          <div class="text">请先前往“个人中心”补全基本信息再提交简历</div>
        </div>
      </el-col>
    </el-row>
  </layout-com>
</template>

<style scoped>
.upload_container {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  top: +100px;
}
.upload-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  height: 300px;
  width: 400px;
  border: 2px solid rgb(222, 227, 235);
}
.btu-box {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  top: +50px;
  .el-button {
    width: 40%;
  }
}
.text {
  margin-top: 20px;
  color: #666666;
  font-weight: bold;
}
</style>
